<template>
	<BaseContainer>
		<div class="main_part">
			<div class="left_part">
				<el-menu default-active="1-1" @select="menuSelect">
					<el-sub-menu index="1">
						<template #title>
							<el-icon><House /></el-icon>
							<span>评价档案</span>
						</template>
						<el-menu-item index="1-1">养老机构</el-menu-item>
						<el-menu-item index="1-2">养老服务组织</el-menu-item>
					</el-sub-menu>
					<el-menu-item index="2">
						<template #title>
							<el-icon><House /></el-icon>
							<span>评价档案</span>
						</template>
					</el-menu-item>
				</el-menu>
			</div>
			<div class="right_part">
				<ServiceIns v-if="tabName == '1-1'"></ServiceIns>
				<ServiceOrg v-if="tabName == '1-2'"></ServiceOrg>
				<AppraiseRecord v-if="tabName == '2'"></AppraiseRecord>
			</div>
		</div>
	</BaseContainer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { House } from '@element-plus/icons-vue'
import AppraiseRecord from './components/appraiseRecord/index.vue'
import ServiceOrg from './components/serviceOrg/index.vue'
import ServiceIns from './components/serviceIns/index.vue'


let tabName = ref('1-1')
const menuSelect = (e) => {
	tabName.value = e
}
</script>

<style scoped>
.main_part{
  width: 100%;
  display: flex;
  flex-direction:row;
  justify-content: flex-start;
  align-items: flex-start;
}
.left_part{
  flex:1;
}
.right_part{
  flex: 9;
}
</style>
